<template>
  <div class="container">
      <p class="title">{{title}}</p>
      <div class="content">
        <div class="desc-content">
          <div class="desc-item" v-for="(item,index) in list" :key="index">
            <span class="desc-item-title">{{item.name}}</span>
            <span class="desc-item-value">
              <a-tooltip content="This is tooltip content">
                <icon-info-circle-fill v-if="item.isTip" />
              </a-tooltip>
              {{item.value || "-"}}
            </span>
          </div>
        </div>
      </div>
  </div>
</template>

<script setup lang=ts>
import { type PropType } from 'vue';
defineProps({
  title: {
    type: String,
    required: true
  },
  list:{
    type: Array as PropType<any[]>,
    required: true
  }
  
})


</script>
<style lang="less" scoped>
.title{
  height: 64px;
  font-weight: 700;
  font-size: 16px;
  color: #394D73;
  margin-bottom: 0;
  line-height: 64px;
}
.content{
  padding: 20px 20px;
  border-radius: 8px;
  background-color: #F7F9FC;
}
.desc-content{
  display: flex;
  flex-wrap: wrap;
}
.desc-item{
  width: 33.3%;
  margin-bottom: 16px;
  &:nth-last-child(-n+3){
    margin-bottom: 0;
  }
}
.desc-item-title{
  
  color: #A3B0CC;
}
.desc-item-value{
  color: #465A80;
}
</style>
